<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            // ajax请求
            $("#ajaxBtn").click(function () {

                $.ajax({
                    url: "http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
                    data: "action=jQueryAjax",
                    type: "GET",
                    success: function (data) {
                        // alert("服务器返回的数据时: " + data)

                        // 把data转成json对象。 当把响应的数据类型(dataType)设成json时 就不需要这一步了
                        // var jsonObj = JSON.parse(data);

                        // $("#msg").html("编号: " + jsonObj.id + ", 姓名: " + jsonObj.name)
                        $("#msg").html("ajax编号: " + data.id + ", 姓名: " + data.name)
                    },
                    // dataType表示响应的数据类型
                    //常用的数据类型有： text 表示纯文本 xml 表示 xml 数据 json 表示 json 对象
                    dataType: "json"

                });

            });

            // ajax--get请求
            $("#getBtn").click(function () {
                //get请求
                $.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet", "action=jQueryGet", function (data) {
                    $("#msg").html(" get 编号：" + data.id + " , 姓名：" + data.name);
                }, "json");
            });

            // ajax--post请求
            $("#postBtn").click(function () {
                // post请求
                $.post("http://localhost:8080/16_json_ajax_i18n/ajaxServlet", "action=jQueryPost", function (data) {
                    $("#msg").html(" post 编号: " + data.id + " , 姓名: " + data.name);
                }, "json")

            });

            // ajax--getJson请求
            $("#getJSONBtn").click(function () {
                // 调用
                $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet", "action=jQueryGetJSON", function (data) {
                    $("#msg").html(" getJson 编号: " + data.id + ", 姓名: " + data.name);
                })

            });

            // ajax请求 - serialize()
            $("#submit").click(function () {
                // 把参数序列化
                alert($("#form01").serialize())

                $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet", "action=jQuerySerialize&" + $("#form01").serialize(), function (data) {
                    $("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name);
                });
            });

        });
    </script>
</head>
<body>
<div>
    <button id="ajaxBtn">$.ajax请求</button>
    <button id="getBtn">$.get请求</button>
    <button id="postBtn">$.post请求</button>
    <button id="getJSONBtn">$.getJSON请求</button>
</div>
<div id="msg">

</div>

<br/><br/>
<form id="form01">
    用户名：<input name="username" type="text"/><br/>
    密码：<input name="password" type="password"/><br/>
    下拉单选：<select name="single">
    <option value="Single">Single</option>
    <option value="Single2">Single2</option>
</select><br/>
    下拉多选：
    <select name="multiple" multiple="multiple">
        <option selected="selected" value="Multiple">Multiple</option>
        <option value="Multiple2">Multiple2</option>
        <option selected="selected" value="Multiple3">Multiple3</option>
    </select><br/>
    复选：
    <input type="checkbox" name="check" value="check1"/> check1
    <input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
    单选：
    <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
    <input type="radio" name="radio" value="radio2"/> radio2<br/>
</form>
<button id="submit">提交--serialize()</button>
</body>
</html>